<template>
  <div class="search_card_my clearfix">
    <i class="iconfont icon-sousuo- left" @click="searchCoupoon"></i>
    <form action="#" @submit.prevent="searchCoupoon">
      <input class="left" v-model="couponSearch" type="text" @focus="cardFocus" @blur="cardBlur" :placeholder="fontContent" />
    </form>
  </div>
</template>

<script>
export default {
  data: () => ({
    couponSearch: ''
    // fontContent: '搜索电子券名称或相关店铺'
  }),
  props: {
    fontContent: {
      type: String,
      default: ''
    }
  },
  methods: {
    searchCoupoon() {
      this.$emit('searchCoupoon', this.couponSearch)
    },
    cardFocus() {
      this.$emit('cardFocus')
    },
    cardBlur() {
      this.$emit('cardBlur')
    }
  }
}
</script>

<style lang="css" scoped>
.search_card_my {
  width: 100%;
  color: #fde7ea;
  background-color: #fa6f8e;
  padding: 0.75rem 0;
}

.search_card_my input {
  background-color: #fa6f8e;
  color: #fff;
  height: 17px;
  font-size: 1rem;
  width: 85%;
}

.search_card_my input::-webkit-input-placeholder {
  color: #fde7ea;
}

.search_card_my .iconfont {
  margin: 0 0.65rem 0 0.85rem;
}
</style>
